<!-- parent在app.vue中被渲染，child在Parent.vue中被渲染
 app.vue是爷爷，parent是父亲，child是儿子-->
<template>
  <h3>child</h3>
  <p>{{ title }}</p>
  <p>{{ age }}</p>
  <ul>
    <!-- 注意是 v-for 不是v:for学太多了容易记混 -->
    <li v-for="(item,index) in names" :key="index"> {{ item }}</li>  

  </ul>
  <p>{{ obj }}</p>
  <p>{{ obj.id }}</p>
  <p>{{ obj.name }}</p>
  <p>{{ obj.age }}</p>

  <button @:click="someEvent">子组件向父组件传递数据</button>

  <!-- 显示父组件传递的title属性，说明子组件可以接收父组件传递的属性 -->
</template>

<!-- 加scoped 不然样式会在全局都生效-->


<script>
export default {
    methods: {
someEvent(){
    // 组件事件，父组件可以监听子组件的事件，参数1是事件名称，参数2是传递给父组件的数据
    this.$emit("someEvent", "我是子组件，这是传递给父组件的数据123123");
}
    },
  // 在这里接收父组件传递的属性
//   props: ["title", "age","names","obj"],
// 数据校验

 
props: {
  title: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 0,
    // 默认值：不传时默认值0
    required: true
// 必填项，不传则报错
  },
  names: {
    type: Array,
    required: true
  },
  obj: {
    type: Object,
    required: true
  }}

};
</script>

<style scoped>
h3 {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
  margin-top: 50px;
  background: #999;
}
</style>